<template>
  <el-dialog
    class="flow-dialog"
    title="客户端"
    :model-value="visible"
    width="30%"
    destroy-on-close
    center
    modal
    :close-on-click-modal="false"
    :show-close="false"
  >
    <el-form
      ref="formRef"
      :model="clientForm"
      :rules="rules"
      inline-message
      :status-icon="true"
      label-width="120"
    >
      <el-form-item label="客户端名称" prop="clientName">
        <el-input
          v-model="clientForm.clientName"
          placeholder="请输入客户端名称"
          maxlength="10"
          clearable
        />
      </el-form-item>
      <el-form-item label="重定向地址" prop="webServerRedirectUri">
        <el-input
          v-model="clientForm.webServerRedirectUri"
          placeholder="请输入重定向地址"
          clearable
        />
      </el-form-item>
      <el-form-item label="允许访问的URL" prop="additionalInformation">
        <el-input
          v-model="clientForm.additionalInformation"
          placeholder="请输入允许访问的URL"
          type="textarea"
          :rows="2"
          clearable
        />
      </el-form-item>
      <el-form-item label="应用说明" prop="allowUrl">
        <el-input
          v-model="clientForm.allowUrl"
          placeholder="请输入应用说明"
          type="textarea"
          :rows="2"
          clearable
        />
      </el-form-item>
      <el-form-item label="应用签约权限" prop="scopeArray">
        <DictSelector
          code="SYS_SCOPE"
          v-model="clientForm.scopeArray"
          placeholder="请选择应用签约权限"
          multiple
        />
      </el-form-item>
      <el-form-item label="允许授权类型" prop="grantTypeArray">
        <DictSelector
          code="GRANT_TYPE"
          v-model="clientForm.grantTypeArray"
          placeholder="请选择允许授权类型"
          multiple
        />
      </el-form-item>
    </el-form>
    <template #footer>
      <span class="dialog-footer">
        <el-button
          type="primary"
          :loading="loading"
          :icon="useRenderIcon('material-symbols:check')"
          @click="submit()"
        >
          保存
        </el-button>
        <el-button
          type="danger"
          :loading="loading"
          :icon="useRenderIcon('material-symbols:close')"
          @click="close()"
        >
          关闭
        </el-button>
      </span>
    </template>
  </el-dialog>
  <SecretMessage />
</template>

<script lang="ts">
import { useRenderIcon } from "@/components/ReIcon/src/hooks";
import { FormInstance } from "element-plus";
import { ClientModel } from "@/api/model/clientModel";
import { defineComponent, reactive, ref } from "vue";
import { addClient, updateClient } from "@/api/client";
import { message } from "@/utils/message";
import DictSelector from "@/components/ReDict/src/dictSelector";
import SecretMessage, {
  openMessage,
} from "@/views/system/client/component/secretMessage.vue";

const loading = ref(false);
const visible = ref(false);
const add = ref(true);
const formRef = ref<FormInstance>();
const clientForm = ref<ClientModel>({});

const rules = reactive({
  clientName: [
    { required: true, message: "请输入客户端名称", trigger: "blur" },
    {
      min: 1,
      max: 20,
      message: "客户端名称必须在1-20个字符之间",
      trigger: "blur",
    },
  ],
  grantTypeArray: [
    { required: true, message: "请选择允许授权类型", trigger: "blur" },
  ],
  scopeArray: [
    { required: true, message: "请选择应用签约权限", trigger: "blur" },
  ],
});

const close = () => {
  visible.value = false;
};
const openAdd = () => {
  clientForm.value = {
    state: true,
  };
  add.value = true;
  visible.value = true;
};
const openEdit = (form: ClientModel) => {
  clientForm.value = {
    id: form.id,
    clientName: form.clientName,
    webServerRedirectUri: form.webServerRedirectUri,
    allowUrl: form.allowUrl,
    additionalInformation: form.additionalInformation,
    scopeArray: form.scope.split(","),
    grantTypeArray: form.authorizedGrantTypes.split(","),
  } as ClientModel;
  add.value = false;
  visible.value = true;
};

export default defineComponent({
  components: { SecretMessage, DictSelector },
  setup(props, context) {
    function reloadList() {
      context.emit("reload");
    }
    function submit() {
      formRef.value.validate(valid => {
        if (valid) {
          clientForm.value.scope = clientForm.value.scopeArray.join(",");
          clientForm.value.authorizedGrantTypes =
            clientForm.value.grantTypeArray.join(",");
          loading.value = true;
          const api = ref<Function>();
          if (add.value) {
            api.value = addClient;
          } else {
            api.value = updateClient;
          }
          api
            .value(clientForm.value)
            .then(res => {
              if (res) {
                if (add.value) {
                  openMessage(res);
                }
                message("保存成功", { type: "success" });
                reloadList();
                close();
              } else {
                message("保存失败", { type: "error" });
              }
            })
            .catch(e => {
              message(e.message, { type: "error" });
            })
            .finally(() => {
              loading.value = false;
            });
        }
      });
    }
    return {
      formRef,
      rules,
      loading,
      visible,
      add,
      clientForm,
      close,
      submit,
      useRenderIcon,
    };
  },
});

export function initClientDialog() {
  return {
    openAdd,
    openEdit,
  };
}
</script>
<style scoped></style>
